<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫码验证</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.3.2/jsencrypt.min.js"></script>
    <!-- 引入moment.js库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 id="headerName">扫码验证</h1>
        </div>
        <div class="content">
            <div class="info-item">
                <span class="info-label">文件类别：</span>
                <span class="info-value" id="fileType">--</span>
            </div>
            <div class="info-item">
                <span class="info-label">文件编号：</span>
                <span class="info-value" id="fileNo">--</span>
            </div>
            <div class="info-item">
                <span class="info-label">开具单位：</span>
                <span class="info-value" id="issueUnit">--</span>
            </div>
            <div class="info-item">
                <span class="info-label">开具时间：</span>
                <span class="info-value" id="issueDate">--</span>
            </div>
            <div class="info-item">
                <span class="info-label">有效期截止日期：</span>
                <span class="info-value" id="expireDate">--</span>
            </div>
            <div class="info-item">
                <span class="info-label">申请人：</span>
                <span class="info-value" id="applicant">--</span>
            </div>
            <div class="source">
                本文件由阳泉市矿区行政审批局建设的基层便民服务平台出具，真实有效。
            </div>
        </div>
    </div>
    <div id="loading" class="loading" style="display: none;">数据加载中...</div>
    <div id="roleSelectModal" class="role-select-modal" style="display: none;">
        <div class="role-select-content">
            <div class="role-select-title">请选择您的身份</div>
            <div class="role-select-buttons">
                <button class="role-button" onclick="selectRole('staff')">工作人员</button>
                <button class="role-button" onclick="selectRole('user')">普通用户</button>
            </div>
        </div>
    </div>
    <div id="securityModal" class="security-modal" style="display: none;">
        <div class="security-content">
            <div class="security-title">安全验证</div>
            <div class="security-info">
                <i class="info-icon"></i> 你正在使用手机号码进行验证
            </div>
            <div class="security-info">
                手机号码：<span id="phoneNumber">***********</span>
            </div>
            <div class="verify-code-input-group">
                <input type="text" class="security-input" id="verifyCode" placeholder="请输入6位验证码" maxlength="6">
                <button class="verify-code-button" id="getVerifyCode" onclick="sendVerifyCode()">获取验证码</button>
            </div>
            <button class="security-button" onclick="confirmVerification()">确定</button>
            <div class="security-info" style="text-align: center; margin-top: 16px;">
                <a href="javascript:void(0)" onclick="showOtherVerifyMethod()">手机不可用？其他验证方式</a>
            </div>
        </div>
    </div>
    <script src="./encrypt.js"></script>
    <script src="./main.js"></script>
</body>
</html>